<!-- swiper -->
<template>
  <!-- :options变量形式进行轮播自定义 -->
  <div class="container">
    <swiper ref="mySwiper" :options="myOptionsDefine">
      <swiper-slide>
        <img src="http://browser9.qhimg.com/bdm/384_237_0/t016bfcfba1e1d7b91f.jpg" alt />
      </swiper-slide>
      <swiper-slide>
        <img src="http://browser9.qhimg.com/bdm/384_237_0/t01bdf16da8a63840e8.jpg" alt />
      </swiper-slide>
      <swiper-slide>
        <img src="http://browser9.qhimg.com/bdm/384_237_0/t01b30dd1843479c87c.jpg" alt />
      </swiper-slide>
      <!-- <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>-->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    //这里存放数据
    return {
      list: [
        {
          img: "http://browser9.qhimg.com/bdm/384_237_0/t016bfcfba1e1d7b91f.jpg"
        },
        {
          img: "http://browser9.qhimg.com/bdm/384_237_0/t016bfcfba1e1d7b91f.jpg"
        },
        {
          img: "http://browser9.qhimg.com/bdm/384_237_0/t016bfcfba1e1d7b91f.jpg"
        }
      ],
      myOptionsDefine: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true // 允许点击小圆点跳转
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false, // 手动切换之后继续自动轮播
          speed: 3000
        },
        loop: true
      },
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true // 允许点击小圆点跳转
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false // 手动切换之后继续自动轮播
        },
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  }
};
</script>
<style scoped>
img {
  width: 375px;
  border-radius: 20px;
}
.container{
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
</style>